<template>
	<view class="content display displayColumn displaycenter_aliem  width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">油品管理</text>
			</template>
		</u-navbar>

		<view class="fn_all display  displayColumn displaycenter_jus M-T30">
			<view class="item_one display  width-100 displaycenter_aliem ">
				<span class="fn_nnm1 M-L24">所属加油站</span>
				<view class="display displaycenter_aliem M-R24" @click="flag=true">
					<span class="fn_nnm2">{{nameStation || '请选择加油站'}} </span>
					<uni-icons type="right" color="#72778A" size="15"></uni-icons>
				</view>

			</view>
			<view class="liness M-L24 M-T24">

			</view>
			<view class="item_one display  width-100 displaycenter_aliem M-T24">
				<span class="fn_nnm1 M-L24">选择油号</span>
				<view class="changesSele display  displaycenter_aliem M-R24">
					<block v-for="(item,index) in arr" :key="index">
						<view class="ones display  all_item"
							:style="{border:selectIndex==index?'1rpx solid #126BC9' :'1rpx solid #7a7a7a'  }"
							@click="selectIndex=index">
							<view class="fn_sidfs display " v-if="selectIndex==index">

							</view>
						</view>
						<span class="fn_jiuwu" style="margin-left: 8rpx;">{{item}}</span>
					</block>
				</view>
			</view>
			<view class="liness M-L24 M-T24">

			</view>
			<view class="item_one display  width-100 displaycenter_aliem M-T24">
				<span class="fn_nnm1 M-L24">油号状态</span>
				<view class="M-R24">
					<u-switch v-model="value1" activeColor="#00E166"></u-switch>
				</view>
			</view>
		</view>
		<u-popup :show="flag" mode="bottom" round="20" :safeAreaInsetBottom="false">
			<view class="display  popup_all displayColumn">
				<view class="title_delete display displaycenter_aliem ">
					<span @click="closeOpen" class="cancles">取消</span>
					<span class="fontSize font_comm lingqu_txt">选择加油站</span>
					<!-- <uni-icons class="delete_icon " style="z-index: 1000000;" type="closeempty" size="24"
						></uni-icons> -->
					<span @click="submitus" class="submits">确定</span>
				</view>
				<scroll-view class="display displayColumn" scroll-y="true" style="height: 800rpx;"
					@scrolltolower="scrolltolower" lower-threshold="50">
					<!-- 隔离 -->
					<view class="display " style="width: 100%;height: 72rpx;"></view>
					<view class="one display  all_item" v-for="(item,index) in addressArr" :key="index">
						<detailsVue @fatherMethod="fatherMethod" :item="item"></detailsVue>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<view class="width-100  fn_nulls display  all_item">
			<button class="fn_btn_bottoms" @click="add">保存</button>
		</view>
	</view>
</template>

<script>
	import detailsVue from './details.vue';
	export default {
		components: {
			detailsVue
		},
		data() {
			return {
				value1: false,
				flag: false,
				addressArr: [],
				arr: ['#92', '#95', '#98', '#0'],
				selectIndex: 0,
				nameSelect: null,
				nameStation: '',
				pageNum: 1,
				ingoArr: [],
				total: 22,
				id:''
			}
		},
		onLoad() {
			this.getLists();
			this.getyoupinList();

		},
		
		methods: {
			add() {
				this.$modal.loading('加载中')
				// console.log(this.nameSelect, this.nameStation, this.addressArr)
				let id = ''
				this.addressArr.forEach(item=>{
					if(item.stationName==this.nameStation){
						id = item.id
					}
				})
				let data = {
					stationId: id,
					stationName: this.nameStation,
					petrolName: this.arr[this.selectIndex], //油号
					petrolUseStatus: this.value1 ? 0 : 1
				}
				console.log(data)
				this.$req.post('/xcx/petrolProduct', data).then(res => {
					console.log(res)
					if(res.data.code==200){
						this.$modal.msg('新增成功')
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			fatherMethod(e) {
				console.log(e,'1');
				this.nameStation = e;
				for (let i = 0; i < this.addressArr.length; i++) {
					if (this.addressArr[i].stationName == e) {
						this.addressArr[i].flag = !this.addressArr[i].flag;
						if (this.addressArr[i].flag) {
							this.nameSelect = i;
							for (let j = 0; j < this.addressArr.length; j++) {
								if (i != j) {
									this.addressArr[j].flag = false;
								}
							}
						} else {
							for (let m = 0; m < this.addressArr.length; m++) {
								if (this.addressArr[m].flag) {
									this.nameSelect = m;

								}
							}
						}
					}
				}

			},
			closeOpen() {
				this.flag = false;
			},
			submitus() {

				this.flag = false;
			},
			getyoupinList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: 10
				}
				this.$req.get('/xcx/petrolProduct/list', data).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.total = res.data.total;
						this.ingoArr = this.ingoArr.concat(res.data.rows)
					} else {
						this.$modal.msg(res.data.msg);
					}

				})
			},
			getLists() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						let data = {
							lng: res.longitude,
							lat: res.latitude
						}
						that.$req.get('/xcx/petrolStation/getAllStations', data).then(res => {
							console.log(res)
							res.data.data.forEach(item => {
								that.$set(item, 'flag', false)
							})
							that.addressArr = res.data.data;
							
							console.log(that.addressArr)
						})
					}
				});

			},

		}
	}
</script>

<style scoped lang="scss">
	.popup_all {
		width: 100%;
		height: 800rpx;

		.title_delete {
			position: absolute;
			width: 100%;
			height: 32rpx;
			background: #fff;
			top: 40rpx;
			justify-content: center;
			justify-content: space-around;

			.lingqu_txt {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				justify-self: center;
			}

			.delete_icon {
				position: absolute;
				// justify-self: flex-end;
				right: 40rpx;
			}
		}

		.one {
			width: 100%;
			height: 120rpx;
		}
	}

	.fn_all {
		width: 690rpx;
		// height: 264rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_jiuwu {
		font-weight: 600;
		font-size: 28rpx;
		color: #212121;
	}

	.fn_nulls {
		position: fixed;
		bottom: 108rpx;
	}

	.fn_btn_bottoms {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.ones {
		width: 36rpx;
		height: 36rpx;

		border-radius: 50%;
	}

	.fn_sidfs {
		width: 24rpx;
		height: 24rpx;
		background: #126BC9;
		border-radius: 50%;
	}

	.fn_nnm1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_nnm2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.item_one {
		justify-content: space-between;
	}

	.liness {
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 1rpx solid #F6F6F6;
	}

	.cancles {
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
		z-index: 1111;
	}

	.submits {
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
		z-index: 111;
	}
</style>